<!--竞猜足球-单关 -->
<template>
	<view>
		<view class="model-box ss-flex-col">
			<!-- 头部标题 -->
			<view class="model-header ss-flex-col ss-col-center ss-m-t-20">
				<text class="icon-check-round"></text>
				<view class="score-title ss-font-30 ss-m-t-10">
					<text>比赛数据分析</text>
				</view>
			</view>

				<!-- 赔付差异 -->
				<view class="data-section">
					<view class="section-title">赔付差异</view>
					<view class="data-table">
						<view class="table-row header">
							<view class="table-cell desc-title"></view>
							<view class="table-cell">胜</view>
							<view class="table-cell">平</view>
							<view class="table-cell">负</view>
						</view>
						<view class="table-row">
							<view class="table-cell desc-title">初始</view>
							<view class="table-cell">{{ state.xrData.dif.init.h }}</view>
							<view class="table-cell">{{ state.xrData.dif.init.d }}</view>
							<view class="table-cell">{{ state.xrData.dif.init.a }}</view>
						</view>
						<view class="table-row">
							<view class="table-cell desc-title">即时</view>
							<view class="table-cell">{{ state.xrData.dif.current.h }}</view>
							<view class="table-cell">{{ state.xrData.dif.current.d }}</view>
							<view class="table-cell">{{ state.xrData.dif.current.a }}</view>
						</view>
						<view class="table-row">
							<view class="table-cell desc-title">降幅</view>
							<view class="table-cell">{{ state.xrData.dif.goDown.h }}</view>
							<view class="table-cell">{{ state.xrData.dif.goDown.d }}</view>
							<view class="table-cell">{{ state.xrData.dif.goDown.a }}</view>
						</view>
						<view class="table-row">
							<view class="table-cell desc-title">胜率</view>
							<view class="table-cell">{{ state.xrData.dif.rate.h }}</view>
							<view class="table-cell">{{ state.xrData.dif.rate.d }}</view>
							<view class="table-cell">{{ state.xrData.dif.rate.a }}</view>
						</view>
					</view>
				</view>

				<!-- 分割线 -->
				<view class="divider"></view>

				<!-- 比例预测 -->
				<view class="data-section">
					<view class="section-title">比分预测</view>
					<view class="data-table">
						<view class="table-row header">
							<view class="table-cell desc-title"></view>
							<view class="table-cell">横拟</view>
							<view class="table-cell">推荐</view>
							<view class="table-cell">进球差</view>
						</view>
						<view class="table-row">
							<view class="table-cell desc-title">半场</view>
							<view class="table-cell">{{ state.xrData.scorePredict.half.monitor }}</view>
							<view class="table-cell">{{ state.xrData.scorePredict.half.recommend }}</view>
							<view class="table-cell">{{ state.xrData.scorePredict.half.ballDif }}</view>
						</view>
						<view class="table-row">
							<view class="table-cell desc-title">全场</view>
							<view class="table-cell">{{ state.xrData.scorePredict.full.monitor }}</view>
							<view class="table-cell">{{ state.xrData.scorePredict.full.recommend }}</view>
							<view class="table-cell">{{ state.xrData.scorePredict.full.ballDif }}</view>
						</view>
						<view class="table-row">
							<view class="table-cell desc-title">进球</view>
							<view class="table-cell">{{ state.xrData.scorePredict.ball.monitor }}</view>
							<view class="table-cell">{{ state.xrData.scorePredict.ball.recommend }}球</view>
							<view class="table-cell"></view>
						</view>
					</view>
				</view>

				<!-- 分割线 -->
				<view class="divider"></view>

				<!-- 赔付预警 -->
				<view class="data-section">
					<view class="section-title">赔付监控</view>
					<view class="data-table">
						<view class="table-row header">
							<view class="table-cell desc-title"></view>
							<view class="table-cell">胜</view>
							<view class="table-cell">平</view>
							<view class="table-cell">负</view>
							<view class="table-cell time-cell">时间</view>
						</view>
						<view v-for="(item, index) in state.xrData.imPay.had" :key="index" class="table-row">
							<view v-if="index === 0" class="table-cell desc-title">初赔</view>
							<view v-else class="table-cell desc-title">即时</view>
							<view class="table-cell">{{ item.h }}</view>
							<view class="table-cell">{{ item.d }}</view>
							<view class="table-cell">{{ item.a }}</view>
							<view class="table-cell time-cell">{{ item.date }}</view>
						</view>
					</view>
				</view>

				<!-- 分割线 -->
				<view class="divider"></view>

				<!-- 主要让2球 -->
				<view class="data-section">
					<view class="section-title"></view>
					<view class="data-table">
						<view class="table-row header">
							<view class="table-cell desc-title let-ball">主{{ state.xrData.imPay.letBall }}</view>
							<view class="table-cell">胜</view>
							<view class="table-cell">平</view>
							<view class="table-cell">负</view>
							<view class="table-cell time-cell">时间</view>
						</view>

						<view v-for="(item, index) in state.xrData.imPay.notHand" :key="index" class="table-row">
							<view v-if="index === 0" class="table-cell desc-title">初赔</view>
							<view v-else class="table-cell desc-title">即时</view>
							<view class="table-cell">{{ item.h }}</view>
							<view class="table-cell">{{ item.d }}</view>
							<view class="table-cell">{{ item.a }}</view>
							<view class="table-cell time-cell">{{ item.date }}</view>
						</view>
					</view>
				</view>
		</view>

	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		watch
	} from 'vue';
	const props = defineProps({
		item: {
			type: Object,
			default () {},
		},
	});
	const state = reactive({
		xrData: {
				dif: {
					init: {
						h: '0.004320',
						d: '0.020290',
						a: '0.018365'
					},
					current: {
						h: '0.004801',
						d: '0.010899',
						a: '0.010230'
					},
					goDown: {
						h: '0.02',
						'd': '0.90',
						'a': '1.2'
					},
					rate: {
						h: '37.11',
						'd': '27.84',
						'a': '35.05'
					},
				},
				scorePredict: {
					half: {
						monitor: '0.78:0.73',
						recommend: '1:1',
						ballDif: '0.05'
					},
					full: {
						monitor: '3:2.9',
						recommend: '3:3',
						ballDif: '0.1'
					},
					ball: {
						monitor: '5.9',
						recommend: '5,6'
					},
				},
				imPay: {
					had: [{
							h: 1.2,
							d: 3.5,
							a: 4.9,
							date: '04-24 13:12'
						},
						{
							h: 1.2,
							d: 4.9,
							a: 6.7,
							date: '04-24 15:30'
						},
						{
							h: 1.2,
							d: 4.9,
							a: 6.7,
							date: '04-24 18:56'
						},
					],
					letBall: '+2',
					notHand: [{
							h: 2.2,
							d: 4.9,
							a: 6.7,
							date: '04-24 18:30'
						},
						{
							h: 4.3,
							d: 3.4,
							a: 4.5,
							date: '04-24 18:30'
						},
						{
							h: 3.5,
							d: 3.1,
							a: 2.7,
							date: '04-24 18:30'
						},
					],
				},
			},
		
	});
</script>

<style lang="scss" scoped>
/* 弹框整体样式 */
	.let-ball {
		color: red !important;
	}

	.desc-title {
		flex: 0 0 90rpx !important;
		/* 不扩展/不收缩/基础宽度150rpx */
		//min-width: 10rpx;
		//background-color: #f9f9f9; /* 测试用 */
	}

	.time-cell {
		width: 260rpx;
		/* 时间列也固定宽度 */
		min-width: 260rpx;
		flex-shrink: 0;
	}

	/* 其他单元格自动分配剩余空间 */
	.table-cell:not(.desc-title):not(.time-cell) {
		flex: 1;
	}

	.model-box {
		height: 70vh;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
	}

	.model-header {
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.icon-check-round {
		font-size: 60rpx;
		color: #07C160;
	}

	.score-title {
		font-weight: bold;
		color: #333;
	}

	.model-content {
		flex: 1;
		padding: 0 30rpx;
		height: calc(70vh - 200rpx);
	}

	/* 数据区块样式 */
	.data-section {
		margin: 30rpx 0;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
	}

	.data-table {
		width: 100%;
		border: 1rpx solid #eaeaea;
		border-radius: 8rpx;
		overflow: hidden;
	}

	.table-row {
		display: flex;
		width: 100%;
		border-bottom: 1rpx solid #eaeaea;
	}

	.table-row:last-child {
		border-bottom: none;
	}

	.table-cell {
		flex: 1;
		//padding: 20rpx 10rpx;
		text-align: center;
		font-size: 28rpx;
		color: #666;
	}

	.header .table-cell {
		font-weight: bold;
		background-color: #f9f9f9;
		color: #333;
	}

	/* 分割线 */
	.divider {
		height: 20rpx;
		background-color: #f5f5f5;
		margin: 0 -30rpx;
	}
	.content {
		background-color: #f5f5f5;
	}







	













</style>